<template>
  <div id="viewQuestionView">
    <a-row :gutter="[24, 24]">
      <a-col :md="12" :xs="24">
        <a-tabs
          default-active-key="question"
          @tab-click="handleTabClick"
          lazy-load
        >
          <!-- 题目选项卡 -->
          <a-tab-pane key="question" title="题目">
            <a-card v-if="question" :title="question.title">
              <a-descriptions
                title="判题条件"
                :column="{ xs: 1, md: 2, lg: 3 }"
              >
                <a-descriptions-item label="时间限制">
                  {{ question.judgeConfig.timeLimit ?? 0 }}
                </a-descriptions-item>
                <a-descriptions-item label="内存限制">
                  {{ question.judgeConfig.memoryLimit ?? 0 }}
                </a-descriptions-item>
                <a-descriptions-item label="堆栈限制">
                  {{ question.judgeConfig.stackLimit ?? 0 }}
                </a-descriptions-item>
              </a-descriptions>
              <MdViewer :value="question.content || ''" />
              <template #extra>
                <a-space wrap>
                  <a-tag
                    v-for="(tag, index) of question.tags"
                    :key="index"
                    color="green"
                  >
                    {{ tag }}
                  </a-tag>
                </a-space>
              </template>
            </a-card>
          </a-tab-pane>

          <!-- 评论区选项卡 -->
          <a-tab-pane key="comment" title="评论" disabled>
            <a-card v-if="comments" :title="`${question?.title} - 评论区`">
              <a-list :data="comments">
                <template #item="{ item }">
                  <a-list-item>
                    <a-comment
                      :author="item.userName"
                      :datetime="item.createTime"
                    >
                      <template #avatar>
                        <a-avatar>{{ item.userName?.charAt(0) }}</a-avatar>
                      </template>
                      <template #content>
                        <p>{{ item.content }}</p>
                      </template>
                    </a-comment>
                  </a-list-item>
                </template>
              </a-list>
              <a-divider />
              <a-comment>
                <template #avatar>
                  <a-avatar>{{ currentUser?.userName?.charAt(0) }}</a-avatar>
                </template>
                <template #content>
                  <a-textarea
                    v-model="newComment"
                    placeholder="写下你的评论..."
                    :auto-size="{ minRows: 3 }"
                  />
                  <a-button
                    type="primary"
                    style="margin-top: 10px"
                    @click="submitComment"
                  >
                    发表评论
                  </a-button>
                </template>
              </a-comment>
            </a-card>
          </a-tab-pane>

          <!-- 答案选项卡 -->
          <a-tab-pane key="answer" title="答案">
            <a-card
              v-if="questionPartialVO"
              :title="`${questionPartialVO?.title} - 答案`"
            >
              <a-descriptions title="解题思路" :column="1">
                <a-descriptions-item>
                  <MdViewer :value="'我是解题思路' || ''" />
                </a-descriptions-item>
              </a-descriptions>
              <a-divider />
              <a-tabs type="rounded">
                <a-tab-pane key="java" title="Java">
                  <pre class="code-block">{{ questionPartialVO.answer }}</pre>
                </a-tab-pane>
                <a-tab-pane key="cpp" title="C++">
                  <pre class="code-block">{{ questionPartialVO.answer }}</pre>
                </a-tab-pane>
                <a-tab-pane key="python" title="Python">
                  <pre class="code-block">{{ questionPartialVO.answer }}</pre>
                </a-tab-pane>
              </a-tabs>
            </a-card>
          </a-tab-pane>
        </a-tabs>
      </a-col>
      <!--右侧的代码黑色编辑框-->
      <a-col :md="12" :xs="24">
        <a-form :model="form" layout="inline">
          <a-form-item
            field="language"
            label="编程语言"
            style="min-width: 240px"
          >
            <a-select
              v-model="form.language"
              :style="{ width: '320px' }"
              placeholder="选择编程语言"
            >
              <a-option>java</a-option>
              <a-option>cpp</a-option>
              <a-option>go</a-option>
            </a-select>
          </a-form-item>
        </a-form>
        <CodeEditor
          :value="form.code as string"
          :language="form.language"
          :handle-change="changeCode"
        />
        <a-divider size="0" />
        <a-button type="primary" style="min-width: 200px" @click="doSubmit">
          提交代码
        </a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watchEffect, withDefaults, defineProps } from "vue";
import message from "@arco-design/web-vue/es/message";
import CodeEditor from "@/components/CodeEditor.vue";
import MdViewer from "@/components/MdViewer.vue";
import {
  QuestionControllerService,
  QuestionPartialVO,
  QuestionSubmitAddRequest,
  QuestionSubmitControllerService,
  QuestionVO,
} from "../../../generated";

interface Props {
  id: string;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => "",
});

const questionPartialVO = ref<QuestionPartialVO>();

const question = ref<QuestionVO>();

const loadData = async () => {
  const res = await QuestionControllerService.getQuestionVoByIdUsingGet(
    props.id as any
  );
  if (res.code === 0) {
    question.value = res.data;
  } else {
    message.error("加载失败，" + res.message);
  }
};

const loadDataWithAnswer = async () => {
  const res = await QuestionControllerService.getQuestionPartialVoByIdUsingGet(
    props.id as any
  );
  if (res.code === 0) {
    questionPartialVO.value = res.data;
  } else {
    message.error("加载失败，" + res.message);
  }
};

// // 评论数据
// const comments = ref([]);
// // 新评论内容
// const newComment = ref("");
// // 当前用户信息
// const currentUser = ref({});

// // 加载评论数据
// const loadComments = async () => {
//   const res = await CommentControllerService.getCommentsByQuestionIdUsingGet(
//     props.id
//   );
//   if (res.code === 0) {
//     comments.value = res.data;
//   } else {
//     message.error("评论加载失败: " + res.message);
//   }
// };

// // 提交评论
// const submitComment = async () => {
//   if (!newComment.value.trim()) {
//     Message.warning("评论内容不能为空");
//     return;
//   }
//   const res = await CommentControllerService.addCommentUsingPost({
//     questionId: props.id,
//     content: newComment.value,
//   });
//   if (res.code === 0) {
//     message.success("评论发表成功");
//     newComment.value = "";
//     await loadComments();
//   } else {
//     message.error("评论发表失败: " + res.message);
//   }
// };

// 选项卡切换处理
const handleTabClick = (key) => {
  switch (key) {
    case "question":
      loadData();
      break;
    case "comment":
      // loadComments();
      break;
    case "answer":
      loadDataWithAnswer();
      break;
  }
};

const form = ref<QuestionSubmitAddRequest>({
  language: "java",
  code: "",
});

/**
 * 提交代码
 */
const doSubmit = async () => {
  if (!question.value?.id) {
    return;
  }
  const res = await QuestionSubmitControllerService.doQuestionSubmitUsingPost({
    ...form.value,
    questionId: question.value.id,
  });
  if (res.code === 0) {
    message.success("提交成功");
  } else {
    message.error("提交失败," + res.message);
  }
};

/**
 * 页面加载时，请求数据
 */
onMounted(() => {
  loadData();
  // // 加载当前用户信息 (发评论）
  // UserControllerService.getLoginUserUsingGet().then((res) => {
  //   if (res.code === 0) {
  //     currentUser.value = res.data;
  //   }
  // });
});

const changeCode = (value: string) => {
  form.value.code = value;
};
</script>

<style>
#viewQuestionView {
  max-width: 1400px;
  margin: 0 auto;
}

#viewQuestionView .arco-space-horizontal .arco-space-item {
  margin-bottom: 0 !important;
}
</style>
